<script setup>
// import { useAuthStore } from '@/stores/auth';
import { useGenerateImageVariant } from '@core/composable/useGenerateImageVariant';
import pages401 from '@images/pages/401.png';
import miscMaskDark from '@images/pages/misc-mask-dark.png';
import miscMaskLight from '@images/pages/misc-mask-light.png';

definePage({
  alias: '/pages/misc/not-authorized',
  meta: {
    layout: 'blank',
    public: true,
  },
})

const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)

// const authStore = useAuthStore();
// authStore.clearToken();// 清除 localStorage 数据

</script>

<template>
  <div class="misc-wrapper">
    <ErrorHeader status-code="401" title="你没有被授权！🔐" description="您没有访问此页的权限。" />

    <VBtn class="mb-11" :to="{ name: 'login' }">返回登录</VBtn>

    <!-- 👉 Image -->
    <div class="misc-avatar w-100 text-center">
      <VImg :src="pages401" alt="not autorized" :max-height="$vuetify.display.smAndDown ? 350 : 500" class="mx-auto" />
    </div>

    <img class="misc-footer-img d-none d-md-block" :src="authThemeMask" alt="misc-footer-img" height="320">
  </div>
</template>

<style lang="scss">
@use "@core/scss/template/pages/misc.scss";
</style>
